<template>
    <div class="data-statistics-container">
        <!-- 刷新控制栏 -->
        <div class="refresh-controls">
            <div class="refresh-info">
                <span v-if="lastUpdateTime" class="last-update">
                    最后更新：{{ lastUpdateTime }}
                </span>
                <el-switch v-model="autoRefreshEnabled" @change="toggleAutoRefresh" active-text="自动刷新"
                    inactive-text="手动刷新" style="margin-left: 20px;" />
            </div>
            <div class="refresh-actions">
                <el-button type="primary" :icon="isRefreshing ? Loading : Refresh" :loading="isRefreshing"
                    @click="manualRefresh" size="small">
                    {{ isRefreshing ? '刷新中...' : '手动刷新' }}
                </el-button>
                <el-select v-model="refreshInterval" @change="updateRefreshInterval" size="small"
                    style="width: 120px; margin-left: 10px;">
                    <el-option label="10秒" :value="10000" />
                    <el-option label="30秒" :value="30000" />
                    <el-option label="1分钟" :value="60000" />
                    <el-option label="5分钟" :value="300000" />
                </el-select>
            </div>
        </div>

        <!-- 数据概览卡片：绑定后端返回的实验室整体数据 -->
        <div class="overview-cards">
            <!-- 实时温度：绑定 labData.temperature -->
            <el-card class="stat-card">
                <div class="card-content">
                    <div class="card-icon" style="background: #e6f7ff;">
                        <el-icon size="24" color="#1890ff">
                            <Sunny />
                        </el-icon>
                    </div>
                    <div class="card-info">
                        <div class="card-value">{{ labData.temperature }}°C</div>
                        <div class="card-label">实时温度</div>
                    </div>
                </div>
            </el-card>

            <!-- 实时湿度：绑定 labData.humidity -->
            <el-card class="stat-card">
                <div class="card-content">
                    <div class="card-icon" style="background: #f6ffed;">
                        <el-icon size="24" color="#52c41a">
                            <svg t="1758615939216" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="5289" width="200" height="200">
                                <path
                                    d="M512 17.066667C419.271111 17.066667 124.586667 369.777778 124.586667 609.848889c0 218.453333 174.08 397.084444 387.413333 397.084444 213.333333 0 387.413333-178.631111 387.413333-397.084444C899.413333 369.777778 604.728889 17.066667 512 17.066667z m313.457778 592.782222c0 177.493333-140.515556 321.991111-313.457778 321.991111s-313.457778-144.497778-313.457778-321.991111C198.542222 392.533333 459.093333 117.191111 512 93.297778c52.906667 23.893333 313.457778 299.235556 313.457778 516.551111z"
                                    fill="#B7B7B7" p-id="5290"></path>
                                <path
                                    d="M383.431111 621.226667c-5.12-13.653333-17.635556-23.893333-31.857778-26.168889s-29.582222 3.413333-38.684444 14.791111c-9.102222 11.377778-11.377778 27.306667-6.257778 40.96a327.111111 327.111111 0 0 0 192.284445 191.146667 41.415111 41.415111 0 0 0 54.613333-32.426667 40.96 40.96 0 0 0-26.737778-46.08c-65.991111-23.893333-117.76-76.231111-143.36-142.222222z"
                                    fill="#B7B7B7" p-id="5291"></path>
                            </svg>
                        </el-icon>
                    </div>
                    <div class="card-info">
                        <div class="card-value">{{ labData.humidity }}%</div>
                        <div class="card-label">实时湿度</div>
                    </div>
                </div>
            </el-card>

            <!-- 烟雾浓度：绑定 labData.smokeScope -->
            <el-card class="stat-card">
                <div class="card-content">
                    <div class="card-icon" style="background: #fff7e6;">
                        <el-icon size="24" color="#fa8c16">
                            <TrendCharts />
                        </el-icon>
                    </div>
                    <div class="card-info">
                        <div class="card-value">{{ labData.smokeScope }}%</div>
                        <div class="card-label">烟雾浓度</div>
                    </div>
                </div>
            </el-card>

            <!-- 工位占用：绑定 labData.curStudentNum / labData.maxWorkstation -->
            <el-card class="stat-card">
                <div class="card-content">
                    <div class="card-icon" style="background: #f9f0ff;">
                        <el-icon size="24" color="#722ed1">
                            <User />
                        </el-icon>
                    </div>
                    <div class="card-info">
                        <div class="card-value">{{ labData.curStudentNum }}/{{ labData.maxWorkstation }}</div>
                        <div class="card-label">当前工位数</div>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 图表区域：添加饼状图实现 -->
        <div class="chart-section">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-card :header="`${labData.labName} 温湿度趋势图`">
                        <!-- 温湿度趋势图 -->
                        <div ref="tempHumChartRef" style="width: 100%; height: 300px;"></div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card :header="`${labData.labName} 工位状态统计`">
                        <!-- 工位状态饼图 -->
                        <div ref="statusPieChartRef" style="width: 100%; height: 300px;"></div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- 数据表格：绑定后端 workstations 数组 -->
        <el-card :header="`${labData.labName} 工位详细数据`" style="margin-bottom: 20px;">
            <el-table :data="workstationsList" stripe style="width: 100%;margin-top: 10px;">
                <el-table-column prop="workstationCode" label="工位编号" width="180" />
                <el-table-column prop="workstationStatus" label="工位状态" width="180">
                    <template #default="scope">
                        <el-tag :type="scope.row.workstationStatus === 'normal' ? 'success' : 'danger'">
                            {{ scope.row.workstationStatus === 'normal' ? '正常' : '异常' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="temperature" label="温度" width="120">
                    <template #default="scope">
                        {{ scope.row.temperature || '未采集' }}°C
                    </template>
                </el-table-column>
                <el-table-column prop="humidity" label="湿度" width="120">
                    <template #default="scope">
                        {{ scope.row.humidity || '未采集' }}%
                    </template>
                </el-table-column>
                <el-table-column prop="smokeScope" label="烟雾值" width="120">
                    <template #default="scope">
                        {{ scope.row.smokeScope || '未采集' }}%
                    </template>
                </el-table-column>
                <el-table-column prop="lightIntensity" label="光照强度" width="150">
                    <template #default="scope">
                        {{ scope.row.lightIntensity || '未采集' }} %
                    </template>
                </el-table-column>
                <el-table-column prop="powerStatus" label="电源状态" width="120">
                    <template #default="scope">
                        <el-tag :type="scope.row.powerStatus === '1' ? 'success' : 'danger'" style="cursor: pointer;" @click="handlePower(scope.row)">
                            {{ scope.row.powerStatus === '1' ? '开启' : '关闭' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="detail" label="操作" width="120">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="viewWorkstationDetail(scope.row)">
                            详情
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div style="margin-top: 20px; text-align: right;">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]" :total="workstationsList.length"
                    layout="total, sizes, prev, pager, next, jumper" />
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

// 图标引入
import {
    User,
    TrendCharts,
    PieChart,
    Sunny,
    Refresh,
    Loading
} from '@element-plus/icons-vue'
// axios引入
import request from '@/utils/request'

// 引入ECharts
import * as echarts from 'echarts'

const router = useRouter()

// 实时刷新相关变量
const isRefreshing = ref(false)
const autoRefreshEnabled = ref(true)
const refreshInterval = ref(30000) // 30秒刷新一次
let refreshTimer = null
const lastUpdateTime = ref('')

// 响应式变量
const labData = reactive({
    id: '',
    labName: '加载中...',
    labLocation: '',
    maxWorkstation: 50,  // 总工位固定为50
    curStudentNum: 0,    // 当前工作的工位数量
    temperature: 0,
    humidity: 0,
    smokeScope: 0,
    modifyTime: null
})

// 图表相关引用
const tempHumChartRef = ref(null)
const statusPieChartRef = ref(null)  // 饼图容器引用
let tempHumChartInstance = null
let statusPieChartInstance = null    // 饼图实例

// 刷新相关方法
const updateLastUpdateTime = () => {
    const now = new Date()
    lastUpdateTime.value = now.toLocaleTimeString('zh-CN', {
        hour12: false,
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    })
}

const startAutoRefresh = () => {
    if (refreshTimer) {
        clearInterval(refreshTimer)
    }
    if (autoRefreshEnabled.value) {
        refreshTimer = setInterval(() => {
            fetchData()
        }, refreshInterval.value)
    }
}

const stopAutoRefresh = () => {
    if (refreshTimer) {
        clearInterval(refreshTimer)
        refreshTimer = null
    }
}

const toggleAutoRefresh = (enabled) => {
    if (enabled) {
        startAutoRefresh()
    } else {
        stopAutoRefresh()
    }
}

const updateRefreshInterval = () => {
    if (autoRefreshEnabled.value) {
        startAutoRefresh()
    }
}

// 查看工位详情
const viewWorkstationDetail = (workstation) => {
    console.log('查看工位详情:', workstation)
    // 跳转到数据分析页面，并传递工位ID
    router.push({
        name: 'DataAnalysis',
        query: {
            workstationId: workstation.id
        }
    })
}

const manualRefresh = async () => {
    if (isRefreshing.value) return
    await fetchData()
}

// 电源控制方法
const handlePower = async (row) => {
    // 先切换状态
    const originalStatus = row.powerStatus
    row.powerStatus = row.powerStatus === '1' ? '0' : '1'

    try {
        const params = new URLSearchParams()
        params.append('workstationCode', String(row.workstationCode))
        params.append('powerStatus', String(Number(row.powerStatus)))
        await request.post(
            '/workstation/set/powerStatus',
            params,
            {
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
            }
        )
        ElMessage.success(`工位 ${row.workstationCode} 电源已${row.powerStatus === '1' ? '开启' : '关闭'}`)
    } catch (error) {
        // 恢复原始状态
        row.powerStatus = originalStatus
        console.error('操作失败:', error)
        ElMessage.error('操作失败，请重试')
    }
}

// 工位列表变量
const workstationsList = reactive([])
const currentPage = ref(1)
const pageSize = ref(10)

// 生成时间标签
const generateTimeLabels = () => {
    const labels = []
    const now = new Date()
    for (let i = 9; i >= 0; i--) {
        const time = new Date(now.getTime() - i * 30 * 60 * 1000)
        const hour = time.getHours().toString().padStart(2, '0')
        const minute = time.getMinutes().toString().padStart(2, '0')
        labels.push(`${hour}:${minute}`)
    }
    return labels
}

// 温湿度图表初始化
const initTempHumChart = (tempData, humData, timeLabels) => {
    nextTick(() => {
        if (!tempHumChartRef.value) return

        if (tempHumChartInstance) {
            tempHumChartInstance.dispose()
        }

        tempHumChartInstance = echarts.init(tempHumChartRef.value)

        // 处理原始数据（保留两位小数，用于鼠标悬停）
        const rawTempData = tempData.map(val => Number(val).toFixed(2))
        const rawHumData = humData.map(val => Number(val).toFixed(2))

        // 处理坐标轴显示数据（转为整数）
        const axisTempData = rawTempData.map(val => Math.round(Number(val)))
        const axisHumData = rawHumData.map(val => Math.round(Number(val)))

        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' },
                formatter: (params) => {
                    let res = `${params[0].name}<br/>`
                    params.forEach(item => {
                        const unit = item.seriesName === '温度' ? '°C' : '%'
                        const rawValue = item.seriesName === '温度'
                            ? rawTempData[item.dataIndex]
                            : rawHumData[item.dataIndex]
                        res += `${item.seriesName}：${rawValue}${unit}<br/>`
                    })
                    return res
                }
            },
            legend: {
                data: ['温度', '湿度'],
                top: 0,
                left: 'center'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                top: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: timeLabels,
                axisLabel: {
                    rotate: 45,
                    fontSize: 10,
                    color: '#666'
                },
                axisLine: { lineStyle: { color: '#eee' } }
            },//增强数据处理能力：对历史数据按 halfHourStart 时间升序排序，截取最近 25 条数据渲染图表；温湿度数据保留 1 位小数，优化显示精度
            yAxis: [
                {
                    type: 'value',
                    name: '温度 (℃)',
                    nameTextStyle: { color: '#1890ff' },
                    min: Math.min(...axisTempData) - 2 || 10,
                    max: Math.max(...axisTempData) + 2 || 40,
                    axisLabel: {
                        formatter: '{value}℃',
                        color: '#1890ff'
                    },
                    splitLine: { lineStyle: { color: '#f5f5f5' } }
                },//优化 DataStatistics.vue 组件：新增刷新控制栏（支持自动 / 手动刷新切换，可选 10 秒 - 5 分钟刷新间隔，显示最后更新时间），提升数据实时性管控能力
                {
                    type: 'value',
                    name: '湿度 (%)',
                    nameTextStyle: { color: '#52c41a' },
                    min: 0,
                    max: 100,
                    position: 'right',
                    offset: 0,
                    axisLabel: {
                        formatter: '{value}%',
                        color: '#52c41a'
                    },
                    splitLine: { show: false }
                }
            ],
            series: [
                {
                    name: '温度',
                    type: 'line',
                    data: axisTempData,
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 6,
                    itemStyle: { color: '#1890ff' },
                    lineStyle: { color: '#1890ff', width: 2 },
                    yAxisIndex: 0
                },
                {
                    name: '湿度',
                    type: 'line',
                    data: axisHumData,
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 6,
                    itemStyle: { color: '#52c41a' },
                    lineStyle: { color: '#52c41a', width: 2 },
                    yAxisIndex: 1
                }
            ]
        }

        tempHumChartInstance.setOption(option)

        window.addEventListener('resize', () => {
            if (tempHumChartInstance) {
                tempHumChartInstance.resize()
            }
        })
    })
}

// 工位状态饼图初始化方法
const initStatusPieChart = (workstations) => {
    nextTick(() => {
        if (!statusPieChartRef.value) return

        if (statusPieChartInstance) {
            statusPieChartInstance.dispose()
        }

        statusPieChartInstance = echarts.init(statusPieChartRef.value)

        // 总工位固定为50
        const totalWorkstations = 50

        // 从后端数据获取正在工作的工位数量
        const workingCount = labData.curStudentNum

        // 筛选工作中且正常/异常的工位
        const normalWorking = workstations.filter(
            item => item.workstationStatus === 'normal'
        ).length

        const abnormalWorking = workingCount - normalWorking

        // 空闲工位数量
        const idleCount = totalWorkstations - workingCount

        // 计算百分比
        const workingPercent = ((workingCount / totalWorkstations) * 100).toFixed(1)
        const normalPercent = workingCount > 0 ? ((normalWorking / workingCount) * 100).toFixed(1) : 0
        const abnormalPercent = workingCount > 0 ? ((abnormalWorking / workingCount) * 100).toFixed(1) : 0

        // 获取正常和异常工位的编号
        const normalCodes = workstations
            .filter(item => item.workstationStatus === 'normal')
            .map(item => item.workstationCode)
            .join(', ')

        const abnormalCodes = workstations
            .filter(item => item.workstationStatus !== 'normal')
            .map(item => item.workstationCode)
            .join(', ')

        const option = {
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    if (params.name === '工作中') {
                        return `正常工作: ${normalWorking}个 (占总数${((normalWorking / 50) * 100).toFixed(1)}%)<br/>编号: ${normalCodes}`
                    } else if (params.name === '异常工作') {
                        return `异常工作: ${abnormalWorking}个 (占工作中${abnormalPercent}%)<br/>编号: ${abnormalCodes}`
                    } else {
                        return `空闲工位: ${idleCount}个<br/>占总数${((idleCount / totalWorkstations) * 100).toFixed(1)}%`
                    }
                }
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: ['工作中', '异常', '空闲']
            },
            series: [
                {
                    name: '工位状态',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    // 饼图扇区之间的缝隙
                    itemStyle: {
                        borderRadius: 8,
                        borderColor: '#fff',
                        borderWidth: 3
                    },
                    // 中心显示总工位和工作中比例
                    label: {
                        show: true,
                        position: 'center',
                        formatter: `${workingCount}/${totalWorkstations}`,
                        fontSize: 14,
                        fontWeight: 'bold',
                        lineHeight: 24
                    },//代码部分
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 16
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {
                            value: normalWorking,
                            name: '工作中',
                            itemStyle: { color: '#52c41a' }  // 绿色表示工作中
                        },
                        {
                            value: abnormalWorking,
                            name: '异常',
                            itemStyle: { color: '#f5222d' }  // 红色表示异常工作
                        },
                        {
                            value: idleCount,
                            name: '空闲',
                            itemStyle: { color: '#e8e8e8' }  // 灰色表示空闲
                        }
                    ]
                }
            ]
        }

        statusPieChartInstance.setOption(option)

        // 监听窗口大小变化，重绘图表
        window.addEventListener('resize', () => {
            if (statusPieChartInstance) {
                statusPieChartInstance.resize()
            }
        })
    })
}

// 数据获取方法
const fetchData = async () => {
    if (isRefreshing.value) return

    isRefreshing.value = true
    try {
        // 获取实验室和工位基础数据
        const response = await request.get('/env/admin/query')
        const resData = response.data

        console.log("基础数据返回结果:", resData)

        if (resData.state === 200 && resData.data) {
            // 清空之前的工位数据
            workstationsList.splice(0, workstationsList.length)

            // 赋值基础数据
            Object.assign(labData, resData.data)
            // 确保总工位为50
            labData.maxWorkstation = 50
            labData.curStudentNum = resData.data.workstations.length
            workstationsList.push(...resData.data.workstations)

            console.log("工位列表数据:", workstationsList)

            // 处理电源状态
            workstationsList.forEach(row => {
                if (row.powerStatus === undefined) {
                    row.powerStatus = 0
                } else {
                    row.powerStatus = String(row.powerStatus)
                }
            })

            // 更新工位状态饼图
            initStatusPieChart(workstationsList)

            // 获取温湿度历史数据
            let temperatureData = []
            let humidityData = []
            let timeLabels = []

            if (workstationsList.length > 0) {
                const targetWorkstation = workstationsList[0]
                console.log(`使用工位 ${targetWorkstation.workstationCode} 查询历史数据`)

                try {
                    // 保留原有的接口请求方式和参数
                    const historyResponse = await request.get('/env/history/1', {
                        params: {
                            workstationCode: 1,
                            count: 20,
                            interval: 1
                        }
                    })

                    // 完整获取响应数据
                    const historyData = historyResponse.data
                    console.log("历史数据返回结果:", historyData)

                    // 验证接口状态和数据结构
                    if (historyData.state === 200 &&
                        historyData.data &&
                        historyData.data.records &&
                        Array.isArray(historyData.data.records) &&
                        historyData.data.records.length > 0) {

                        // 对数据按时间排序（确保从早到晚展示）
                        const sortedRecords = [...historyData.data.records].sort((a, b) =>
                            new Date(a.halfHourStart) - new Date(b.halfHourStart)
                        )

                        // 只取最近的10条数据，避免图表过于拥挤
                        const recentRecords = sortedRecords.slice(-25)

                        // 解析时间格式：将ISO时间转换为HH:MM
                        timeLabels = recentRecords.map(item => {
                            const date = new Date(item.halfHourStart)
                            const hours = date.getHours().toString().padStart(2, '0')
                            const minutes = date.getMinutes().toString().padStart(2, '0')
                            return `${hours}:${minutes}`
                        })

                        // 解析温度和湿度数据，保留一位小数
                        temperatureData = recentRecords.map(item =>
                            item.avgTemperature ? Number(item.avgTemperature).toFixed(1) : 0
                        )
                        humidityData = recentRecords.map(item =>
                            item.avgHumidity ? Number(item.avgHumidity).toFixed(1) : 0
                        )

                        console.log("解析后的温度数据:", temperatureData)
                        console.log("解析后的湿度数据:", humidityData)
                        console.log("解析后的时间标签:", timeLabels)
                    } else {
                        console.log('历史数据查询返回空，使用模拟数据: ' + (historyData?.message || '无数据'))
                        // 生成模拟数据
                        temperatureData = Array(10).fill().map(() =>
                            (Number(labData.temperature) + (Math.random() * 4 - 2)).toFixed(1)
                        )
                        humidityData = Array(10).fill().map(() =>
                            (Number(labData.humidity) + (Math.random() * 8 - 4)).toFixed(1)
                        )
                        timeLabels = generateTimeLabels()
                    }
                } catch (historyError) {
                    console.log('历史数据接口请求失败: ' + historyError.message)
                    // 错误时生成模拟数据
                    temperatureData = Array(10).fill().map(() =>
                        (Number(labData.temperature) + (Math.random() * 4 - 2)).toFixed(1)
                    )
                    humidityData = Array(10).fill().map(() =>
                        (Number(labData.humidity) + (Math.random() * 8 - 4)).toFixed(1)
                    )
                    timeLabels = generateTimeLabels()
                }
            } else {
                console.log('无工位数据，使用默认模拟数据')
                temperatureData = [23, 24, 25, 24.5, 25, 25.5, 26, 25.8, 25.2, 24.8]
                humidityData = [50, 52, 51, 53, 52, 54, 53, 55, 54, 53]
                timeLabels = generateTimeLabels()
            }

            // 更新温湿度图表
            initTempHumChart(temperatureData, humidityData, timeLabels)

        } else {
            console.log('基础数据查询失败：' + resData.message)
            // 基础数据获取失败时显示默认图表
            initTempHumChart(
                [23, 24, 25, 24.5, 25, 25.5, 26, 25.8, 25.2, 24.8],
                [50, 52, 51, 53, 52, 54, 53, 55, 54, 53],
                generateTimeLabels()
            )
            // 初始化默认饼图数据
            initStatusPieChart([])
        }

        // 更新最后更新时间
        updateLastUpdateTime()

    } catch (error) {
        console.log('接口请求失败：' + error.message)
        // 整体请求失败时的降级处理
        initTempHumChart(
            [23, 24, 25, 24.5, 25, 25.5, 26, 25.8, 25.2, 24.8],
            [50, 52, 51, 53, 52, 54, 53, 55, 54, 53],
            generateTimeLabels()
        )
        // 初始化默认饼图数据
        initStatusPieChart([])
    } finally {
        isRefreshing.value = false
    }
}

// 页面加载时初始化数据
onMounted(async () => {
    await fetchData()
    // 启动自动刷新
    startAutoRefresh()
})

// 页面卸载时清理定时器
onUnmounted(() => {
    stopAutoRefresh()
})
</script>

<style scoped>
/* 样式部分保持不变 */
.watermark-container {
    position: relative;
    min-height: 100vh;
}

.watermark-container::before {
    content: "保密资料 - 内部使用";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 48px;
    color: rgba(0, 0, 0, 0.1);
    z-index: 9999;
    pointer-events: none;
    white-space: nowrap;
    font-weight: bold;
}

.data-statistics-container {
    padding: 15px;
}

.refresh-controls {
    margin-top: -20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.refresh-info {
    display: flex;
    align-items: center;
}

.last-update {
    color: #6c757d;
    font-size: 14px;
}

.refresh-actions {
    display: flex;
    align-items: center;
}

.overview-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 15px;
}

.stat-card {
    border-radius: 8px;
}

.card-content {
    display: flex;
    align-items: center;
    padding: 10px;
}

.card-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.card-value {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
}

.card-label {
    font-size: 14px;
    color: #909399;
    margin-top: 5px;
}

.chart-section {
    margin-bottom: 20px;
}

.chart-placeholder {
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #909399;
}

.chart-placeholder p {
    margin-top: 10px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .overview-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .overview-cards {
        grid-template-columns: 1fr;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
</style>
